<template>
    <div>
        <group>
            <div>
                <datetime format="YYYY-MM-DD"></datetime>
            </div>
        </group>
        <div class="div"></div>
        <div class="container"
             id="printTest">
            <!-- <img src="../assets/logo.png"> -->
            <!-- <VuePerfectScrollbar class="scroll-area"
                             v-once
                             :settings="settings"
                             @ps-scroll-y="scrollHanle"> -->
            <input type="checkbox"
                   v-model="toggle"
                   class="toggle">
            <input type="text"
                   v-if="toggle"
                   v-focus
                   class="input">
            <GeminiScrollbar class="scroll-area">
                <ul class="list">
                    <li v-for="item in 100">666666666</li>
                    <li>炫光舞法</li>
                    <!--想想这里有一堆li-->
                    <li>天舞台</li>
                </ul>
            </GeminiScrollbar>
            <button @click="exportExcel"></button>
            <!-- </VuePerfectScrollbar> -->
            <table id="out-table">
                <thead>
                    <tr>
                        <th>1</th>
                        <th>1</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button v-print="'#printTest'">打印</button>
    </div>
</template>

<script>

// import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import FileSaver from 'file-saver' // 导出需要的
import XLSX from 'xlsx' // 导出需要的
import { Datetime, Group } from 'vux'
export default {
    name: 'HelloWorld',
    components: {
        Datetime,
        Group
    },
    data () {
        return {
            settings: {
                maxScrollbarLength: 60
            },
            autoshow: false,
            toggle: false
        }
    },
    created () {
    },
    directives: {
        focus: {
            // 当绑定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        }
    },
    methods: {
        scrollHanle (evt) {
            console.log(evt)
        },
        exportExcel () {
            /* generate workbook object from table */
            var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
            /* get binary string as output */
            var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.vux-datetime{
    height: 24px;
}
.div{
    width: 375px;
    height: 200px;
    background: red;
}
.scroll-area {
    position: relative;
    margin: auto;
    width: 375px;
    height: 300px;
}

/* vertical scrollbar track */
.gm-scrollbar.-vertical {
    background-color: #f0f0f0;
}

/* horizontal scrollbar track */
.gm-scrollbar.-horizontal {
    background-color: transparent;
}

/* scrollbar thumb */
.gm-scrollbar .thumb {
    background-color: rebeccapurple;
}
.gm-scrollbar .thumb:hover {
    background-color: fuchsia;
}
</style>
